```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notion MCP - 智能任务管理解决方案</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', Georgia, 'Times New Roman', Times, serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: rgba(110, 142, 251, 0.3);
            z-index: -1;
            transition: all 0.3s ease;
        }
        .highlight:hover::after {
            height: 14px;
            background-color: rgba(110, 142, 251, 0.5);
        }
        .code-block {
            background-color: #2d3748;
            border-left: 4px solid #6e8efb;
        }
        .step-number {
            width: 36px;
            height: 36px;
            background-color: #6e8efb;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        .hover-scale {
            transition: transform 0.3s ease;
        }
        .hover-scale:hover {
            transform: scale(1.03);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Notion MCP</h1>
                    <p class="text-xl md:text-2xl mb-8 font-light opacity-90">基于 MCP 协议的开源服务器，<br>让您通过自然语言轻松管理 Notion 任务</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#features" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300 shadow-md hover:shadow-lg">
                            探索功能 <i class="fas fa-arrow-down ml-2"></i>
                        </a>
                        <a href="https://github.com/danhilse/notion_mcp" target="_blank" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-medium transition duration-300">
                            <i class="fab fa-github mr-2"></i> GitHub 项目
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="bg-white bg-opacity-20 p-6 rounded-2xl backdrop-blur-sm border border-white border-opacity-20 hover-scale">
                        <div class="bg-gray-800 rounded-lg p-4 text-gray-200 font-mono text-sm">
                            <div class="flex items-center mb-3">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <p class="mb-2"><span class="text-green-400">$</span> 添加今天的任务：完成项目提案</p>
                            <p class="mb-2"><span class="text-green-400">$</span> 显示今日任务</p>
                            <p class="mb-2"><span class="text-gray-500">1. [ ] 完成项目提案 (今天)</span></p>
                            <p class="mb-2"><span class="text-green-400">$</span> 完成任务：完成项目提案</p>
                            <p><span class="text-gray-500">✔ 任务标记为完成</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Statement -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12">它能解决什么问题？</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover-scale">
                    <div class="text-indigo-600 mb-4 text-4xl">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">手动操作耗时</h3>
                    <p class="text-gray-600">传统 Notion 任务管理需要频繁手动输入和更新待办事项，在繁忙的工作流中尤为低效。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover-scale">
                    <div class="text-indigo-600 mb-4 text-4xl">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">工具切换频繁</h3>
                    <p class="text-gray-600">传统任务管理工具需要反复切换界面，无法直接通过 AI 助手操作，打断工作流程。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover-scale">
                    <div class="text-indigo-600 mb-4 text-4xl">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">数据库结构复杂</h3>
                    <p class="text-gray-600">复杂的数据库结构让非技术用户感到困惑，增加了使用门槛。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover-scale">
                    <div class="text-indigo-600 mb-4 text-4xl">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">AI 集成缺失</h3>
                    <p class="text-gray-600">现有工具缺乏与 Notion API 和 AI 的无缝集成，无法利用自然语言简化操作。</p>
                </div>
            </div>
            <div class="mt-12 text-center">
                <p class="text-xl font-semibold">Notion MCP <span class="highlight">正是为解决这些问题而生</span>，通过 MCP 协议和 Claude Desktop 提供简化的接口，让用户以自然语言管理 Notion 待办事项。</p>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section id="features" class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">核心功能概述</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">专为简化任务管理而设计的强大功能，让您的工作流程更加高效</p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-plus-circle text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">添加新待办事项</h3>
                            <p class="text-gray-600">通过自然语言命令（如"添加今天的任务：检查邮件"），快速在 Notion 数据库中创建任务，简化任务录入。</p>
                        </div>
                    </div>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-list-ul text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">查看所有任务</h3>
                            <p class="text-gray-600">列出 Notion 数据库中的全部待办事项，支持按"今天"或"稍后"筛选，便于快速掌握任务概况。</p>
                        </div>
                    </div>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-calendar-day text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">查看今日任务</h3>
                            <p class="text-gray-600">专注于当天任务，显示标记为"今天"的待办事项，帮助用户集中处理优先事项。</p>
                        </div>
                    </div>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="flex items-start mb-4">
                        <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-check-circle text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">标记任务完成</h3>
                            <p class="text-gray-600">通过命令（如"完成任务：审阅项目"）更新 Notion 数据库中的复选框状态，保持任务进度清晰。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Visual Diagram -->
            <div class="bg-white p-8 rounded-xl shadow-md mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-center">Notion MCP 工作原理</h3>
                <div class="mermaid">
                    graph LR
                        A[用户输入自然语言命令] --> B[Claude Desktop]
                        B --> C[Notion MCP 服务器]
                        C --> D{解析命令}
                        D -->|添加任务| E[调用 Notion API 创建任务]
                        D -->|查询任务| F[调用 Notion API 获取数据]
                        D -->|完成任务| G[调用 Notion API 更新状态]
                        E --> H[Notion 数据库]
                        F --> H
                        G --> H
                        H --> I[返回操作结果]
                        I --> B
                        B --> J[显示结果给用户]
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">使用场景</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Notion MCP 如何在不同场景中提升您的工作效率</p>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-indigo-50 p-8 rounded-xl shadow-sm hover-scale">
                    <div class="text-indigo-600 mb-4 text-3xl">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">自由职业者</h3>
                    <p class="text-gray-600 mb-4">一名自由职业者使用 Notion 跟踪客户项目。通过 Claude Desktop 输入"添加今天的任务：完成设计初稿"，Notion MCP 将任务添加到 Notion 数据库，并标记为"今天"。</p>
                    <div class="bg-indigo-100 p-4 rounded-lg">
                        <p class="text-indigo-800 font-medium">思考问题：</p>
                        <p class="text-indigo-700">你的日常任务管理是否能通过 Notion MCP 的自然语言交互得到简化？</p>
                    </div>
                </div>
                <div class="bg-purple-50 p-8 rounded-xl shadow-sm hover-scale">
                    <div class="text-purple-600 mb-4 text-3xl">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">小型团队</h3>
                    <p class="text-gray-600 mb-4">一个五人团队使用 Notion 管理共享待办列表。团队成员通过 Claude Desktop 输入"显示所有任务"，查看团队待办事项，或说"完成任务：更新文档"，同步更新 Notion 数据库。</p>
                </div>
                <div class="bg-blue-50 p-8 rounded-xl shadow-sm hover-scale">
                    <div class="text-blue-600 mb-4 text-3xl">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">学生用户</h3>
                    <p class="text-gray-600 mb-4">一名学生使用 Notion 规划学习任务。通过 Notion MCP 输入"添加稍后的任务：复习数学笔记"，将任务标记为"稍后"，并随时说"显示稍后任务"查看未来计划。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">优势与特色</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Notion MCP 在任务管理工具中的独特优势</p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex mb-6">
                        <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4">
                            <i class="fas fa-check-circle text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">自然语言交互</h3>
                    </div>
                    <p class="text-gray-600">通过 Claude Desktop 支持自然语言命令，优于 Notion 的手动输入或 Todoist 的结构化界面，降低操作复杂性。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex mb-6">
                        <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4">
                            <i class="fas fa-feather-alt text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">轻量设计</h3>
                    </div>
                    <p class="text-gray-600">专为简单待办列表优化，仅支持"任务名称""今天/稍后"和"完成状态"三个属性，适合极简用户，减少功能冗余。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex mb-6">
                        <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4">
                            <i class="fas fa-code-branch text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">开源与定制</h3>
                    </div>
                    <p class="text-gray-600">基于 MIT 许可，允许用户修改代码以适配不同 Notion 数据库结构，适合技术用户扩展功能。</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex mb-6">
                        <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4">
                            <i class="fas fa-puzzle-piece text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">MCP 生态集成</h3>
                    </div>
                    <p class="text-gray-600">与 MCP 生态中的其他服务器（如 Git、MongoDB）兼容，支持复杂工作流，优于独立任务管理工具。</p>
                </div>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-md">
                <h3 class="text-2xl font-semibold mb-4 text-red-600">局限性</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-semibold mb-2">数据库结构限制</h4>
                        <p class="text-gray-600">仅支持特定 Notion 数据库结构（任务名称、今天/稍后、复选框），使用其他结构需修改代码。</p>
                    </div>
                    <div>
                        <h4 class="font-semibold mb-2">功能有限</h4>
                        <p class="text-gray-600">不支持高级功能，如循环任务、优先级或标签，可能不适合复杂项目管理。</p>
                    </div>
                    <div>
                        <h4 class="font-semibold mb-2">依赖 AI API</h4>
                        <p class="text-gray-600">需 Claude Desktop 和 Notion API 密钥，API 使用可能产生额外成本。</p>
                    </div>
                    <div>
                        <h4 class="font-semibold mb-2">社区维护</h4>
                        <p class="text-gray-600">开源项目依赖社区更新，存在 90+ 开放问题，可能影响新功能开发或错误修复。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">上手指南</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">只需几个简单步骤，即可开始使用 Notion MCP 提升您的工作效率</p>
            
            <div class="space-y-8">
                <div class="flex items-start">
                    <div class="step-number">1</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">准备环境</h3>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>安装 Python 3.10+：Linux（<code class="bg-gray-100 px-1 rounded">sudo apt install python3</code>），macOS（<code class="bg-gray-100 px-1 rounded">brew install python3</code>），Windows（从 <a href="https://www.python.org" class="text-indigo-600 hover:underline">python.org</a> 下载）</li>
                            <li>安装 Git：Linux（<code class="bg-gray-100 px-1 rounded">sudo apt install git</code>），macOS（<code class="bg-gray-100 px-1 rounded">brew install git</code>），Windows（从 <a href="https://git-scm.com" class="text-indigo-600 hover:underline">git-scm.com</a> 下载）</li>
                            <li>（可选）安装 uv：<code class="bg-gray-100 px-1 rounded">curl -LsSf https://astral.sh/uv/install.sh | sh</code></li>
                            <li>创建 Notion 数据库：确保包含"任务名称（标题）""When（选择：今天/稍后）"和"复选框（完成状态）"三个属性</li>
                        </ul>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="step-number">2</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">创建 Notion 集成</h3>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>访问 <a href="https://www.notion.so/my-integrations" class="text-indigo-600 hover:underline">Notion 集成页面</a>，创建新集成，复制 API 密钥</li>
                            <li>打开 Notion 待办数据库，点击"..."菜单 → "添加连接"，选择你的集成</li>
                            <li>记录数据库 ID（URL 中 32 位字母数字字符串，如 <code class="bg-gray-100 px-1 rounded">https://www.notion.so/yourworkspace/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code>）</li>
                        </ul>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="step-number">3</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">安装 Notion MCP</h3>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-3">
                            <p class="mb-2"><span class="text-green-400">#</span> 克隆仓库</p>
                            <p class="mb-1"><span class="text-green-400">$</span> git clone https://github.com/danhilse/notion_mcp.git</p>
                            <p class="mb-1"><span class="text-green-400">$</span> cd notion_mcp</p>
                            <p class="mb-2 mt-4"><span class="text-green-400">#</span> 设置 Python 环境</p>
                            <p class="mb-1"><span class="text-green-400">$</span> python -m venv .venv</p>
                            <p class="mb-1"><span class="text-green-400">$</span> source .venv/bin/activate  <span class="text-gray-400"># Windows: .venv\Scripts\activate</span></p>
                            <p><span class="text-green-400">$</span> uv pip install -e .</p>
                        </div>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="step-number">4</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">配置环境变量</h3>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-3">
                            <p class="mb-1"><span class="text-green-400">$</span> echo "NOTION_API_KEY=your-api-key-here" > .env</p>
                            <p><span class="text-green-400">$</span> echo "NOTION_DATABASE_ID=your-database-id-here" >> .env</p>
                        </div>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="step-number">5</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">配置 Claude Desktop</h3>
                        <p class="text-gray-600 mb-3">编辑 <code class="bg-gray-100 px-1 rounded">~/.vscode/mcp.json</code> 或 Claude Desktop 配置文件：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-3">
                            <p>{</p>
                            <p class="ml-4">"mcpServers": {</p>
                            <p class="ml-8">"notion-todo": {</p>
                            <p class="ml-12">"command": "/path/to/your/.venv/bin/python",</p>
                            <p class="ml-12">"args": ["-m", "notion_mcp"],</p>
                            <p class="ml-12">"cwd": "/path/to/notion-mcp"</p>
                            <p class="ml-8">}</p>
                            <p class="ml-4">}</p>
                            <p>}</p>
                        </div>
                        <p class="text-gray-600">替换 <code class="bg-gray-100 px-1 rounded">/path/to/your/.venv/bin/python</code> 和 <code class="bg-gray-100 px-1 rounded">/path/to/notion-mcp</code> 为实际路径。</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="step-number">6</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">运行服务器</h3>
                        <p class="text-gray-600 mb-2 font-medium">直接运行：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg mb-4">
                            <p><span class="text-green-400">$</span> python -m notion_mcp</p>
                        </div>
                        <p class="text-gray-600 mb-2 font-medium">通过 Claude Desktop（推荐）：</p>
                        <p class="text-gray-600 mb-4">启动 Claude Desktop，服务器自动运行，无需手动管理。</p>
                        <p class="text-gray-600 mb-2 font-medium">验证：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg">
                            <p><span class="text-green-400">$</span> npx @modelcontextprotocol/inspector python -m notion_mcp</p>
                        </div>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="step-number">7</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">使用 Notion MCP</h3>
                        <p class="text-gray-600 mb-3">在 Claude Desktop 或 VS Code 输入：</p>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2 mb-4">
                            <li>"显示所有待办事项"：列出 Notion 数据库中的任务</li>
                            <li>"今天有哪些任务？"：显示标记为"今天"的任务</li>
                            <li>"添加今天的任务：检查邮件"：创建新任务</li>
                            <li>"完成任务：审阅项目"：标记任务为完成</li>
                        </ul>
                        <p class="text-gray-600 mb-2 font-medium">检查日志：</p>
                        <div class="code-block text-gray-200 p-4 rounded-lg">
                            <p><span class="text-green-400">$</span> tail -n 20 -f ~/Library/Logs/Claude/mcp*.log</p>
                        </div>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="step-number">8</div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3">故障排除</h3>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>"API 密钥无效"：验证 NOTION_API_KEY 和 NOTION_DATABASE_ID</li>
                            <li>"数据库未找到"：确保数据库已共享给集成</li>
                            <li>"命令未找到"：检查 Python 环境和 pip 安装</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Cost Section -->
    <section class="py-16 px-4 bg-indigo-50">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-4">使用门槛与成本</h2>
            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Notion MCP 是开源工具，核心功能免费，但需配置环境和 API 密钥</p>
            
            <div class="bg-white p-8 rounded-xl shadow-md">
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600">注册要求</h3>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>需 Notion 账户和 API 密钥，需手动安装，无需额外注册</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600">免费版本</h3>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>核心功能完全免费，需自托管，依赖 Python 3.10+ 和 Notion 数据库</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600">高级功能</h3>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>AI 功能需 Anthropic API 密钥（如 Claude），成本依使用量而定，需访问 <a href="https://www.anthropic.com/api" class="text-indigo-600 hover:underline">anthropic.com/api</a> 获取定价</li>
                            <li>Notion API 免费但有使用限制，需遵守 Notion 政策</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600">技术要求</h3>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>需 Python 3.10+、pip、Git，推荐 uv 包管理器</li>
                            <li>最低硬件要求为 2GB 内存和 500MB 存储空间，推荐 4GB 内存</li>
                            <li>熟悉 CLI 和 JSON 配置</li>
                        </ul>
                    </div>
                </div>
                <div class="mt-8 bg-indigo-100 p-4 rounded-lg">
                    <p class="text-indigo-800 font-medium">思考问题：</p>
                    <p class="text-indigo-700">你的 Notion 数据库结构是否适合 Notion MCP 的默认设置，还是需要定制代码以适配？</p>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```